<%@ page contentType="text/html;charset=UTF-8" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="CSS/Login_Register.css">
</head>
<body>
<h1 id="greeting" class="text-font">Hello</h1>
<div class="container login_Image">
    <!-- 注册 -->
    <div class="container-form container-signup">
        <div>
            <form action="RegisterServlet" method="post" class="form">
                <div class="inputBox"><input type="text" id="username"
                                             name="username" required><span>姓名/Username</span></div>
                <br>
                <div class="inputBox"><input type="text" id="phoneNumber"
                                             name="phoneNumber" required><span>手机号/PhoneNumber</span>
                </div>
                <br>
                <div class="inputBox"><input type="text" id="VerificationCode1" name="VerificationCode1"
                                             onclick="RegisterShowCodePopup()"
                                             required><span>验证码/VerificationCodeInput</span></div>
                <br>
                <div class="inputBox"><input type="password" id="password" name="password"
                                             required><span>密码/Password</span></div>
                <br>
                <button type="submit" class="button" id="generatedCode2" name="generatedCode2"
                        onclick="RegisterSubmitForm()">点击注册
                </button>
                <button onclick="clearForm()" class="button">一键清空</button>
            </form>
        </div>
    </div>

    <!-- 登录 -->
    <div class="container-form container-signIn">
        <div>
            <div class="login-app">
                <input type="radio" name="opt" id="msg" checked="checked">
                <label for="msg" class="m-btn">短信登录</label>

                <input type="radio" name="opt" id="uname">
                <label for="uname" class="u-btn">账号登录</label>

                <input type="radio" name="opt" id="code">
                <label for="code" class="q-btn">扫码登录</label>

                <div id="form-bar">
                    <form action="MessageLogin" method="post" class="m-form">
                        <form class="form">
                            <div class="inputBox"><input type="text" id="phoneNumber3"
                                                         name="phoneNumber3" required><span>手机号/PhoneNumber</span>
                            </div>
                            <br>
                            <div class="inputBox"><input type="text" id="VerificationCode" name="VerificationCode"
                                                         onclick="showCodePopup()" required><span>验证码/VerificationCodeInput</span>
                            </div>
                            <br>
                            <button type="submit" class="button" id="generatedCode" name="generatedCode"
                                    onclick="submitForm()">登录
                            </button>
                            <br><br>
                            <button onclick="clearForm()" class="button">一键清空</button>
                            <br><br><br></form>
                    </form>
                    <form action="Servlet" method="post" class="u-form">
                        <form class="form">
                            <div class="inputBox"><input type="text" id="phoneNumber2"
                                                         name="phoneNumber2" required><span>手机号/PhoneNumber</span>
                            </div>
                            <br>
                            <div class="inputBox"><input type="password" id="password2" name="password2"
                                                         required><span>密码/Password</span></div>
                            <br>
                            <a href="TransitionInterface.jsp" class="link" align="center"
                               style="font-size: 10px">忘记密码?</a><br><br>
                            <button type="submit" class="button">登录</button>
                            <br><br>
                            <button onclick="clearForm()" class="button">一键清空</button>
                            <br><br><br>
                        </form>
                    </form>
                    <form class="q-form">
                        <div class="card" id="card">
                            <div class="front">
                                <p>添加微信</p>
                            </div>
                            <div class="back">
                                <img src="photo/friend.jpg" alt="Your Image" id="cardImage">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="container-overlay">
        <div class="overlay">
            <div class="overlay-panel overlay-left">
                <button class="button" id="signIn">
                    已有账号，直接登录
                </button>
            </div>
            <div class="overlay-panel overlay-right">
                <button class="button" id="signUp">
                    没有账号，点击注册
                </button>
                <br>
                <button class="button" onclick="window.location.href='shop.jsp'">
                    游客登录
                </button>
            </div>
        </div>
    </div>
</div>
<iframe src="HTML/IndexPlugin.html" width="100%" height="20%"></iframe>
</body>
<script src="JavaScript/LoginRegister.js">
</script>
</html>